const {
    resolve
} = require('path'),
    htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: resolve(__dirname, './src/js/index.js'),
    output: {
        filename: 'index.js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    // 图片小于10kb 将被解析为base64
                    limit: 10 * 1024,
                    esModule:false,
                    // 取图片哈希值前8位 ext 原扩展名
                    name:'[hash:8].[ext]'
                }
            },
            {
                test: /\.html$/,
                // 处理hmtl中的图片 需要将url-loader中 esModule设置为false
                // 因为html-loader使用common.js解析 url-loader默认使用es6模块化解析
                loader:'html-loader'
            },
            {
                // 打包其他资源
                // exclude:/\.(css|js|html)$/,//排除
                test:/\.(eot|svg|ttf|woff)$/,
                loader:'file-loader'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: resolve(__dirname, './src/index.html'),
        })
    ],
    devServer:{
        open:true,
        compress:true,//压缩
        host:'localhost',
        // contentBase:resolve(__dirname,'dist'),//构建后目录
        port:3000
    }
}